<template>
  <div class="search-container">
    <div class="search-header">
      <div class="search-input-container">
        <el-input
          v-model="searchQuery"
          placeholder="搜索照片、相册或标签..."
          clearable
          size="large"
          @keyup.enter="handleSearch"
          @clear="handleClear"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch" :loading="searching">
          搜索
        </el-button>
      </div>
      
      <div class="search-filters">
        <el-dropdown trigger="click" @command="handleFilterCommand">
          <el-button>
            筛选
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="dateRange">
                <el-icon><Calendar /></el-icon>
                日期范围
              </el-dropdown-item>
              <el-dropdown-item command="fileType">
                <el-icon><Document /></el-icon>
                文件类型
              </el-dropdown-item>
              <el-dropdown-item command="sizeRange">
                <el-icon><ScaleToOriginal /></el-icon>
                文件大小
              </el-dropdown-item>
              <el-dropdown-item command="tags">
                <el-icon><CollectionTag /></el-icon>
                标签
              </el-dropdown-item>
              <el-dropdown-item command="location" divided>
                <el-icon><Location /></el-icon>
                地理位置
              </el-dropdown-item>
              <el-dropdown-item command="camera">
                <el-icon><Camera /></el-icon>
                相机设备
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        
        <el-dropdown trigger="click" @command="handleSortCommand">
          <el-button>
            排序
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="relevance" :class="{ 'is-active': sortBy === 'relevance' }">
                相关性
              </el-dropdown-item>
              <el-dropdown-item command="date" :class="{ 'is-active': sortBy === 'date' }">
                拍摄日期
              </el-dropdown-item>
              <el-dropdown-item command="name" :class="{ 'is-active': sortBy === 'name' }">
                文件名
              </el-dropdown-item>
              <el-dropdown-item command="size" :class="{ 'is-active': sortBy === 'size' }">
                文件大小
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <div class="search-filters-applied" v-if="hasActiveFilters">
      <div class="filter-tags">
        <el-tag
          v-for="filter in activeFilters"
          :key="filter.key"
          closable
          @close="removeFilter(filter.key)"
          class="filter-tag"
        >
          {{ filter.label }}
        </el-tag>
      </div>
      <el-button type="text" @click="clearAllFilters">
        清除所有筛选
      </el-button>
    </div>
    
    <div class="search-tabs">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="照片" name="photos">
          <div v-if="searching" class="search-loading">
            <el-skeleton :rows="5" animated />
          </div>
          <div v-else-if="searchResults.photos.length > 0" class="search-results">
            <div class="result-summary">
              找到 {{ searchResults.photos.length }} 张照片
            </div>
            <div class="photos-grid">
              <div 
                v-for="photo in searchResults.photos" 
                :key="photo.id"
                class="photo-item"
                @click="openPhoto(photo)"
              >
                <div class="photo-thumbnail">
                  <img 
                    :src="getThumbnailUrl(photo)" 
                    :alt="photo.fileName"
                    loading="lazy"
                  />
                </div>
                <div class="photo-info">
                  <div class="photo-name" :title="photo.fileName">{{ photo.fileName }}</div>
                  <div class="photo-date">{{ formatDate(photo.capturedAt || photo.createdAt) }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-results">
            <el-empty description="未找到匹配的照片" />
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="相册" name="albums">
          <div v-if="searching" class="search-loading">
            <el-skeleton :rows="5" animated />
          </div>
          <div v-else-if="searchResults.albums.length > 0" class="search-results">
            <div class="result-summary">
              找到 {{ searchResults.albums.length }} 个相册
            </div>
            <div class="albums-grid">
              <div 
                v-for="album in searchResults.albums" 
                :key="album.id"
                class="album-item"
                @click="openAlbum(album)"
              >
                <div class="album-cover">
                  <img 
                    v-if="album.coverPhotoId"
                    :src="getAlbumCoverUrl(album)" 
                    :alt="album.name"
                  />
                  <div v-else class="album-cover-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </div>
                <div class="album-info">
                  <div class="album-name">{{ album.name }}</div>
                  <div class="album-description" v-if="album.description">
                    {{ album.description }}
                  </div>
                  <div class="album-meta">
                    <span>{{ album.photoCount || 0 }} 张照片</span>
                    <span>{{ formatDate(album.createdAt) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-results">
            <el-empty description="未找到匹配的相册" />
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="标签" name="tags">
          <div v-if="searching" class="search-loading">
            <el-skeleton :rows="5" animated />
          </div>
          <div v-else-if="searchResults.tags.length > 0" class="search-results">
            <div class="result-summary">
              找到 {{ searchResults.tags.length }} 个标签
            </div>
            <div class="tags-list">
              <el-tag
                v-for="tag in searchResults.tags"
                :key="tag.id"
                :color="tag.color"
                class="tag-item"
                @click="searchByTag(tag)"
              >
                {{ tag.name }}
                <span class="tag-count">({{ tag.photoCount || 0 }})</span>
              </el-tag>
            </div>
          </div>
          <div v-else class="no-results">
            <el-empty description="未找到匹配的标签" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <!-- 筛选对话框 -->
    <el-dialog
      v-model="filterDialogVisible"
      :title="filterDialogTitle"
      width="500px"
    >
      <!-- 日期范围筛选 -->
      <div v-if="currentFilter === 'dateRange'" class="filter-form">
        <el-form label-width="80px">
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="dateRange.start"
              type="date"
              placeholder="选择开始日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="dateRange.end"
              type="date"
              placeholder="选择结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 文件类型筛选 -->
      <div v-else-if="currentFilter === 'fileType'" class="filter-form">
        <el-checkbox-group v-model="selectedFileTypes">
          <el-checkbox label="jpg">JPG</el-checkbox>
          <el-checkbox label="jpeg">JPEG</el-checkbox>
          <el-checkbox label="png">PNG</el-checkbox>
          <el-checkbox label="gif">GIF</el-checkbox>
          <el-checkbox label="bmp">BMP</el-checkbox>
          <el-checkbox label="tiff">TIFF</el-checkbox>
          <el-checkbox label="webp">WebP</el-checkbox>
          <el-checkbox label="heic">HEIC</el-checkbox>
          <el-checkbox label="raw">RAW</el-checkbox>
        </el-checkbox-group>
      </div>
      
      <!-- 文件大小筛选 -->
      <div v-else-if="currentFilter === 'sizeRange'" class="filter-form">
        <el-form label-width="80px">
          <el-form-item label="最小大小">
            <el-select v-model="sizeRange.min" placeholder="选择最小大小">
              <el-option label="不限" value="" />
              <el-option label="100KB" value="100KB" />
              <el-option label="500KB" value="500KB" />
              <el-option label="1MB" value="1MB" />
              <el-option label="5MB" value="5MB" />
              <el-option label="10MB" value="10MB" />
            </el-select>
          </el-form-item>
          <el-form-item label="最大大小">
            <el-select v-model="sizeRange.max" placeholder="选择最大大小">
              <el-option label="不限" value="" />
              <el-option label="500KB" value="500KB" />
              <el-option label="1MB" value="1MB" />
              <el-option label="5MB" value="5MB" />
              <el-option label="10MB" value="10MB" />
              <el-option label="50MB" value="50MB" />
              <el-option label="100MB" value="100MB" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 标签筛选 -->
      <div v-else-if="currentFilter === 'tags'" class="filter-form">
        <el-select
          v-model="selectedTags"
          multiple
          filterable
          placeholder="选择标签"
          style="width: 100%"
        >
          <el-option
            v-for="tag in allTags"
            :key="tag.id"
            :label="tag.name"
            :value="tag.id"
          />
        </el-select>
      </div>
      
      <!-- 地理位置筛选 -->
      <div v-else-if="currentFilter === 'location'" class="filter-form">
        <el-form label-width="80px">
          <el-form-item label="国家">
            <el-input v-model="location.country" placeholder="输入国家名称" />
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="location.city" placeholder="输入城市名称" />
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 相机设备筛选 -->
      <div v-else-if="currentFilter === 'camera'" class="filter-form">
        <el-form label-width="80px">
          <el-form-item label="相机品牌">
            <el-input v-model="camera.make" placeholder="输入相机品牌" />
          </el-form-item>
          <el-form-item label="相机型号">
            <el-input v-model="camera.model" placeholder="输入相机型号" />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="filterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="applyFilter">应用</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { 
  ElInput, 
  ElButton, 
  ElIcon, 
  ElDropdown, 
  ElDropdownMenu, 
  ElDropdownItem, 
  ElTag,
  ElTabs,
  ElTabPane,
  ElSkeleton,
  ElEmpty,
  ElDialog,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElCheckboxGroup,
  ElCheckbox,
  ElSelect,
  ElOption,
  ElMessage
} from 'element-plus';
import { 
  Search, 
  ArrowDown, 
  Calendar, 
  Document, 
  ScaleToOriginal, 
  CollectionTag, 
  Location, 
  Camera,
  Picture
} from '@element-plus/icons-vue';
import type { Photo, Album, Tag } from '@/types';
import { searchService } from '@/services/searchService';
import { photoService } from '@/services/photoService';
import { albumService } from '@/services/albumService';

const router = useRouter();

// 搜索相关
const searchQuery = ref('');
const searching = ref(false);
const activeTab = ref('photos');
const sortBy = ref('relevance');

// 搜索结果
const searchResults = ref({
  photos: [] as Photo[],
  albums: [] as Album[],
  tags: [] as Tag[]
});

// 筛选相关
const filterDialogVisible = ref(false);
const currentFilter = ref('');
const filterDialogTitle = ref('');

// 活动筛选条件
const activeFilters = ref<Array<{ key: string; label: string; value: any }>>([]);

// 日期范围
const dateRange = ref({
  start: '',
  end: ''
});

// 文件类型
const selectedFileTypes = ref<string[]>([]);

// 文件大小
const sizeRange = ref({
  min: '',
  max: ''
});

// 标签
const selectedTags = ref<string[]>([]);
const allTags = ref<Tag[]>([]);

// 地理位置
const location = ref({
  country: '',
  city: ''
});

// 相机设备
const camera = ref({
  make: '',
  model: ''
});

// 计算属性：是否有活动筛选条件
const hasActiveFilters = computed(() => {
  return activeFilters.value.length > 0;
});

// 执行搜索
const performSearch = async () => {
  if (!searchQuery.value.trim() && activeFilters.value.length === 0) {
    return;
  }
  
  searching.value = true;
  
  try {
    // 构建搜索参数
    const searchParams: any = {
      query: searchQuery.value.trim(),
      page: 1,
      limit: 50
    };
    
    // 添加筛选条件
    activeFilters.value.forEach(filter => {
      searchParams[filter.key] = filter.value;
    });
    
    // 根据当前标签页执行相应搜索
    switch (activeTab.value) {
      case 'photos':
        const photoResponse = await searchService.searchPhotos(searchParams);
        searchResults.value.photos = photoResponse.photos || [];
        break;
      case 'albums':
        const albumResponse = await searchService.searchAlbums(searchParams);
        searchResults.value.albums = albumResponse.albums || [];
        break;
      case 'tags':
        const tagResponse = await searchService.searchTags(searchParams);
        searchResults.value.tags = tagResponse.tags || [];
        break;
    }
  } catch (error) {
    console.error('搜索失败:', error);
    ElMessage.error('搜索失败');
  } finally {
    searching.value = false;
  }
};

// 处理搜索
const handleSearch = () => {
  performSearch();
};

// 处理清除
const handleClear = () => {
  searchQuery.value = '';
  searchResults.value = {
    photos: [],
    albums: [],
    tags: []
  };
};

// 处理筛选命令
const handleFilterCommand = (command: string) => {
  currentFilter.value = command;
  
  // 设置对话框标题
  switch (command) {
    case 'dateRange':
      filterDialogTitle.value = '按日期范围筛选';
      break;
    case 'fileType':
      filterDialogTitle.value = '按文件类型筛选';
      break;
    case 'sizeRange':
      filterDialogTitle.value = '按文件大小筛选';
      break;
    case 'tags':
      filterDialogTitle.value = '按标签筛选';
      break;
    case 'location':
      filterDialogTitle.value = '按地理位置筛选';
      break;
    case 'camera':
      filterDialogTitle.value = '按相机设备筛选';
      break;
  }
  
  filterDialogVisible.value = true;
};

// 处理排序命令
const handleSortCommand = (command: string) => {
  sortBy.value = command;
  if (searchResults.value.photos.length > 0 || 
      searchResults.value.albums.length > 0 || 
      searchResults.value.tags.length > 0) {
    performSearch();
  }
};

// 处理标签页点击
const handleTabClick = () => {
  if (searchResults.value.photos.length > 0 || 
      searchResults.value.albums.length > 0 || 
      searchResults.value.tags.length > 0) {
    performSearch();
  }
};

// 应用筛选
const applyFilter = () => {
  let filterValue: any;
  let filterLabel = '';
  
  switch (currentFilter.value) {
    case 'dateRange':
      if (dateRange.value.start || dateRange.value.end) {
        filterValue = { ...dateRange.value };
        filterLabel = `日期: ${dateRange.value.start || '开始'} - ${dateRange.value.end || '结束'}`;
      }
      break;
    case 'fileType':
      if (selectedFileTypes.value.length > 0) {
        filterValue = [...selectedFileTypes.value];
        filterLabel = `文件类型: ${selectedFileTypes.value.join(', ')}`;
      }
      break;
    case 'sizeRange':
      if (sizeRange.value.min || sizeRange.value.max) {
        filterValue = { ...sizeRange.value };
        filterLabel = `大小: ${sizeRange.value.min || '最小'} - ${sizeRange.value.max || '最大'}`;
      }
      break;
    case 'tags':
      if (selectedTags.value.length > 0) {
        filterValue = [...selectedTags.value];
        const tagNames = allTags.value
          .filter(tag => selectedTags.value.includes(tag.id))
          .map(tag => tag.name)
          .join(', ');
        filterLabel = `标签: ${tagNames}`;
      }
      break;
    case 'location':
      if (location.value.country || location.value.city) {
        filterValue = { ...location.value };
        const parts = [];
        if (location.value.country) parts.push(location.value.country);
        if (location.value.city) parts.push(location.value.city);
        filterLabel = `位置: ${parts.join(', ')}`;
      }
      break;
    case 'camera':
      if (camera.value.make || camera.value.model) {
        filterValue = { ...camera.value };
        const parts = [];
        if (camera.value.make) parts.push(camera.value.make);
        if (camera.value.model) parts.push(camera.value.model);
        filterLabel = `相机: ${parts.join(' ')}`;
      }
      break;
  }
  
  if (filterValue) {
    // 移除同类型的旧筛选条件
    activeFilters.value = activeFilters.value.filter(
      filter => filter.key !== currentFilter.value
    );
    
    // 添加新筛选条件
    activeFilters.value.push({
      key: currentFilter.value,
      label: filterLabel,
      value: filterValue
    });
    
    // 重新执行搜索
    performSearch();
  }
  
  filterDialogVisible.value = false;
};

// 移除筛选条件
const removeFilter = (filterKey: string) => {
  activeFilters.value = activeFilters.value.filter(
    filter => filter.key !== filterKey
  );
  
  // 重新执行搜索
  if (searchQuery.value.trim() || activeFilters.value.length > 0) {
    performSearch();
  }
};

// 清除所有筛选条件
const clearAllFilters = () => {
  activeFilters.value = [];
  
  // 重置筛选表单
  dateRange.value = { start: '', end: '' };
  selectedFileTypes.value = [];
  sizeRange.value = { min: '', max: '' };
  selectedTags.value = [];
  location.value = { country: '', city: '' };
  camera.value = { make: '', model: '' };
  
  // 重新执行搜索
  if (searchQuery.value.trim()) {
    performSearch();
  }
};

// 打开照片详情
const openPhoto = (photo: Photo) => {
  router.push({
    name: 'PhotoDetail',
    params: { id: photo.id }
  });
};

// 打开相册详情
const openAlbum = (album: Album) => {
  router.push({
    name: 'AlbumDetail',
    params: { id: album.id }
  });
};

// 按标签搜索
const searchByTag = (tag: Tag) => {
  searchQuery.value = `tag:${tag.name}`;
  activeTab.value = 'photos';
  performSearch();
};

// 获取缩略图URL
const getThumbnailUrl = (photo: Photo) => {
  if (photo.thumbnailPath) {
    return `file://${photo.thumbnailPath}`;
  }
  return `file://${photo.filePath}`;
};

// 获取相册封面URL
const getAlbumCoverUrl = async (album: Album) => {
  if (!album.coverPhotoId) return '';
  
  try {
    const coverPhoto = await photoService.getById(album.coverPhotoId);
    return getThumbnailUrl(coverPhoto);
  } catch (error) {
    console.error('获取相册封面失败:', error);
    return '';
  }
};

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '未知';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 加载所有标签
const loadTags = async () => {
  try {
    allTags.value = await searchService.getAllTags();
  } catch (error) {
    ElMessage.error('加载标签失败');
  }
};

// 监听搜索查询变化
watch(searchQuery, (newQuery) => {
  if (newQuery.trim() === '' && activeFilters.value.length === 0) {
    searchResults.value = {
      photos: [],
      albums: [],
      tags: []
    };
  }
});

// 组件挂载后加载数据
onMounted(() => {
  loadTags();
});
</script>

<style scoped lang="scss">
.search-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  
  .search-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
    
    .search-input-container {
      display: flex;
      gap: 12px;
      
      .el-input {
        flex: 1;
      }
    }
    
    .search-filters {
      display: flex;
      gap: 12px;
    }
  }
  
  .search-filters-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 8px 12px;
    background-color: var(--el-bg-color-page);
    border-radius: 8px;
    
    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .filter-tag {
        margin-right: 0;
      }
    }
  }
  
  .search-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .search-loading {
      padding: 20px;
    }
    
    .search-results {
      flex: 1;
      overflow-y: auto;
      
      .result-summary {
        padding: 8px 16px;
        font-size: 14px;
        color: var(--el-text-color-secondary);
        background-color: var(--el-bg-color-page);
        border-radius: 4px;
        margin-bottom: 16px;
      }
      
      .photos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
        
        .photo-item {
          background-color: var(--el-bg-color);
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          transition: all 0.2s ease;
          cursor: pointer;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
          
          .photo-thumbnail {
            height: 150px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          
          .photo-info {
            padding: 8px;
            
            .photo-name {
              font-size: 12px;
              font-weight: 500;
              color: var(--el-text-color-primary);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .photo-date {
              font-size: 10px;
              color: var(--el-text-color-secondary);
              margin-top: 2px;
            }
          }
        }
      }
      
      .albums-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
        
        .album-item {
          background-color: var(--el-bg-color);
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          transition: all 0.2s ease;
          cursor: pointer;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
          
          .album-cover {
            height: 150px;
            overflow: hidden;
            position: relative;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            
            .album-cover-placeholder {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              background-color: var(--el-fill-color-light);
              color: var(--el-text-color-secondary);
              
              .el-icon {
                font-size: 32px;
              }
            }
          }
          
          .album-info {
            padding: 12px;
            
            .album-name {
              font-size: 14px;
              font-weight: 500;
              color: var(--el-text-color-primary);
              margin-bottom: 4px;
            }
            
            .album-description {
              font-size: 12px;
              color: var(--el-text-color-regular);
              margin-bottom: 8px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            
            .album-meta {
              display: flex;
              justify-content: space-between;
              font-size: 10px;
              color: var(--el-text-color-secondary);
            }
          }
        }
      }
      
      .tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        
        .tag-item {
          cursor: pointer;
          font-size: 14px;
          padding: 8px 12px;
          
          .tag-count {
            margin-left: 4px;
            opacity: 0.8;
          }
        }
      }
    }
    
    .no-results {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
    }
  }
  
  .filter-form {
    padding: 16px 0;
    
    .el-checkbox-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .search-container {
    padding: 12px;
    
    .search-header {
      .search-input-container {
        flex-direction: column;
      }
      
      .search-filters {
        justify-content: center;
      }
    }
    
    .search-filters-applied {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    
    .search-tabs {
      .search-results {
        .photos-grid {
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
          gap: 12px;
        }
        
        .albums-grid {
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 12px;
        }
      }
    }
    
    .filter-form {
      .el-checkbox-group {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
</style>